<div class="col-lg-6 col-md-6 col-sm-8 col-xs-12 col-lg-offset-3
col-md-offset-3 col-sm-offset-2 login-wrapper">
  <mat-card class="example-card">
    <mat-card-header style="margin-bottom: 30px;">
      <div class="container row">
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center">
          <button routerLink="/login" mat-raised-button color="basic" class="col-lg-12">
            登录
          </button>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center">
          <button routerLink="/reg" mat-raised-button color="primary" class="col-lg-12">
            注册
          </button>
        </div>
      </div>
    </mat-card-header>
    <mat-card-content class="col-lg-12">
      <mat-tab-group>
        <mat-tab label="手机注册">
          <div class="text-center col-lg-12" style="margin-top: 40px;">
            <mat-form-field style="width: 80%;">
              <input matInput type="text" #input placeholder="手机号码">
            </mat-form-field>
          </div>

          <div class="text-center col-lg-12">
            <mat-form-field style="width: 80%;">
              <input matInput type="text" #input placeholder="滑块验证">
            </mat-form-field>
          </div>

          <div class="text-center col-lg-12">
            <mat-form-field style="width: 54%;">
              <input matInput type="text" #input placeholder="短信验证码">
            </mat-form-field>
            <button mat-raised-button color="primary">获取短信验证码</button>
          </div>

          <div class="text-center col-lg-12">
            <mat-form-field style="width: 80%;">
              <input matInput type="password" #input placeholder="登录密码">
            </mat-form-field>
          </div>
        </mat-tab>

        <mat-tab label="邮箱注册">
          <div class="text-center col-lg-12" style="margin-top: 40px;">
            <mat-form-field style="width: 80%;">
              <input matInput type="text" #input placeholder="电子邮箱">
            </mat-form-field>
          </div>
          <div class="text-center col-lg-12">
            <mat-form-field style="width: 80%;">
              <input matInput type="text" #input placeholder="滑块验证">
            </mat-form-field>
          </div>
          <div class="text-center col-lg-12">
            <mat-form-field style="width: 80%;" hintLabel="最多20位">
              <input matInput type="password" #input maxlength="20" placeholder="登录密码">
              <mat-hint align="end">{{input.value?.length || 0}}/20</mat-hint>
            </mat-form-field>
          </div>

        </mat-tab>
      </mat-tab-group>

    </mat-card-content>
    <mat-card-actions class="text-center" style="margin-bottom: 50px;">
      <button mat-raised-button color="basic">注册</button>
    </mat-card-actions>
  </mat-card>
</div>